<template>
	<!-- play -->
	<view class="play">
		<view class="box">
			<!-- img -->
			<view @click="playDetail" class="img">
				<image :src="musicObj.img" mode=""></image>
			</view>
			<!-- 歌名 -->
			<view class="musicName">
				{{ musicObj.AuthorName ? musicObj.AuthorName : '' }} - {{ musicObj.musicName ? musicObj.musicName : '' }}
			</view>
			<view  class="right">
				<image v-if="musicSate" @click="musicPlay" src="../../static/index/play.png" mode=""></image>
				<image v-else @click="musicStop" src="../../static/index/stop.png" mode=""></image>
				<image src="../../static/index/list.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
import playMusicVue from './playMusic.vue';
	export default {
		props: {
			musicArry: {
				typeof: Array,
				default: []
			},
			musicIndex: {
				typeof: String,
				default: ''
			}
		},
		data() {
			return {
				musicObj: {},
				innerAudioContext: null,
				musicSate: true
			}
		},
		watch: {
			musicArry: {
				deep: true,
				handler(news, old) {
					this.innerAudioContext.destroy();
					this.innerAudioContext = null;
					this.palyMusic()
					// this.musicObj = news;
					console.log(news, old, 'watch')
				}
			}
		},
		mounted() {
			this.musicObj = this.musicArry[this.musicIndex]
			this.palyMusic();
		},
		methods: {
			// 自动播放视频
			palyMusic() {
				console.log(this.musicObj, '播放')
				getApp().globalData.innerAudioContext = uni.createInnerAudioContext();
				console.log(getApp(), '全局')
				this.innerAudioContext = getApp().globalData.innerAudioContext;
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = this.musicObj.url;
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				  this.musicSate = false;
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			// 音乐暂停
			musicStop() {
				console.log('音乐暂停')
				getApp().musicStop();
				this.musicSate = true;
			},
			// 音乐播放
			musicPlay() {
				getApp().musicPlay();
				this.musicSate = false;
				console.log('点击播放')
			},
			// 点击跳转到播放详情
			playDetail() {
				console.log('跳转详情')
				this.$emit('gotoPlay');
				
			}
		}
	}
</script>

<style lang="less" scoped>
.play {
	position: fixed;
	bottom: 20rpx;
	left: 0;
	width: 100%;
	padding: 0 25rpx;
	box-sizing: border-box;

	.box {
		width: 100%;
		height: 95rpx;
		border-radius: 36rpx;
		background: linear-gradient(90deg, rgba(250, 235, 239, 1) 0%, rgba(249, 235, 255, 1) 100%);
		position: relative;
		z-index: 1;
		padding-left: 140rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.img {
			position: absolute;
			z-index: 1;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 110rpx;
			height: 110rpx;
			border-radius: 40rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.musicName {
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44.8rpx;
			color: rgba(19, 13, 20, 1);
			max-width: 400rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			padding-right: 10rpx;
		}

		.right {
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>